<!doctype html>
<html lang="zh_CN">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width,initial-scale=1">
    <title></title>
    <link href="./assset/bootstrap@5.3.0/css/bootstrap.min.css" rel="stylesheet">
  </head>
  <body>
     <!-- 导航条 -->
     <nav class="navbar bg-primary">
        <div class="container-fluid">
          <a class="navbar-brand">动态表格</a>
          <form class="d-flex" role="search">
            <input class="form-control me-2" type="search" placeholder="Search" aria-label="Search">
            <button class="btn btn-outline-success" type="submit">Search</button>
          </form>
        </div>
      </nav>

       <div class="container mt-4">
          <div class="row g-3 justify-content-center">
             <div class="col-12 col-md-8">
               
                 <div class="row">
                    
                    <div class="col-auto">
                        <input type="text" class="form-control" placeholder="Name" id="nameInput" value="张三分" required>
                        <div class="valid-feedback">
                            Looks good!
                          </div>
                    </div>
                    <div class="col-auto"> 
                        <input type="text" class="form-control" placeholder="Job" id="jobInput" value="开发">
                    </div>
                    <div class="col-auto"> 
                        <input type="email" class="form-control" placeholder="Email" id="emailInput" value="zs@123.com">
                    </div>
                    <div class="col-auto">
                        <button type="submit" class="btn btn-primary" id="addBtn">添加</button>
                    </div>
                
                 </div> 
             </div>
          </div>

          <div class="row justify-content-center mt-1">
            <div class="col-8 col-md-6">

                <div class="card">
                    <div class="card-body">
                     
                   

                <table class="table table-striped">
                    <thead>
                      <tr>
                        <th scope="col">#</th>
                        <th scope="col">选择</th>
                        <th scope="col">姓名</th>
                        <th scope="col">职位</th>
                        <th scope="col">邮箱</th>
                        <th scope="col">操作</th>
                      </tr>
                    </thead>
                    <tbody id="dataTbody">
                      <tr>
                        <th scope="row">1</th>
                        <td><input type="checkbox"></td>
                        <td>Mark</td>
                        <td>Otto</td>
                        <td>@mdo</td>
                        <td>
                            <a href="#">删除</a>
                            <a href="#">修改</a>
                        </td>
                      </tr>
                      <tr>
                        <th scope="row">1</th>
                        <td><input type="checkbox"></td>
                        <td>Mark</td>
                        <td>Otto</td>
                        <td>@mdo</td>
                        <td>
                            <a href="#">删除</a>
                            <a href="#">修改</a>
                        </td>
                      </tr>
                       
                    </tbody>
                  </table>

                </div>
            </div>   

            </div>
          </div>

          <div class="row justify-content-center mt-1">
            <div class="col-8 col-md-6 text-center">
                <button class="btn btn-success" id="selectAllBtn">全选</button> 
                <button class="btn btn-danger" id="reverseBtn">反选</button> 
                <button class="btn btn-info" id="deleteSelectBtn">删除所选</button> 
                <button class="btn btn-warning" id="clearBtn">清空</button>  
            </div>
          </div>
       </div>


       <!-- Modal -->
<div class="modal fade" id="empModal" tabindex="-1" aria-labelledby="exampleModalLabel" aria-hidden="true">
    <div class="modal-dialog">
      <div class="modal-content">
        <div class="modal-header">
          <h1 class="modal-title fs-5" id="exampleModalLabel">修改数据</h1>
          <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
        </div>
        <div class="modal-body">
          ...
        </div>
        <div class="modal-footer">
          <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">关闭</button>
          <button type="button" class="btn btn-primary">修改</button>
        </div>
      </div>
    </div>
  </div>
     
    <script src="./assset/bootstrap@5.3.0/js/bootstrap.bundle.min.js"></script>
    <script src="./js/tableex.js"></script>
  </body>
</html>